<template>
    <view class="container ">
        <view class="bgc-ffffff p-20">
            <view class="container__title fs-40 fw-600 py-10 text-center">2024年心理咨询</view>
            <view class="container__time fs-22 c-888888 py-20 flex">
                <uv-button text="原创" :plain="true" color="#8064d2"
                    :custom-style="{width:'60rpx',height:'30rpx'}"></uv-button>
                2025.02.08 15:30 . 1200阅读
            </view>
            <view class="container__author">
                <view class="author-card flex justify-between items-center my-20" v-for="i in 2">
                    <view class="flex">
                        <view class="author-card__cover rounded w-80 h-80">
                            <image src="/static/logo.png" mode="aspectFill"></image>
                        </view>
                        <view class="ml-10 flex flex-col justify-around">
                            <view class="flex">
                                <view class="author-card__name fs-24 fw-600">阳慕颜</view>
                                <view class="author-card__title fs-20 ml-10">认证咨询师</view>
                            </view>
                            <view class="author-card__desc fs-20 c-888888">国家二级心理咨询师</view>
                        </view>
                    </view>
                    <view class="author-card__follow author-card__follow--active">
                        <uv-button text="关注" :plain="true" icon="plus" icon-color="#8064d2" shape="circle"
                            color="#8064d2" size="mini"></uv-button>
                    </view>
                    <view class="author-card__follow author-card__follow--default">
                        <uv-button text="关注" :plain="true" icon="plus" icon-color="#ccc" shape="circle" color="#ccc"
                            size="mini"></uv-button>
                    </view>
                </view>
            </view>
            <view class="container__content">
                春节，这个充满欢乐与温馨的节日，是亲朋好友团聚、共享美食的时刻。在尽情享受节日的喜悦时，我们的生活节奏难免被打乱，健康作息与饮食习惯也悄然改变。如今春节已过，是时候重新关注身体健康，调整生活方式，为新的一年打下坚实的健康基础。
                五个方面助你养成健康生活方式
                1、饮食方面
                营养均衡：每天的膳食应涵盖谷薯类、蔬菜水果、畜禽鱼蛋奶等。摄入谷薯类 250-400 克，餐餐有 300-500 克蔬菜，其中深色蔬菜占一半，天天吃 200-350
                克新鲜水果。适量吃鱼、禽、蛋和瘦肉，优先选鱼和禽，吃鸡蛋不弃蛋黄，少吃肥肉、烟熏和腌制肉制品。
                规律进餐：三餐定时定量，吃饭细嚼慢咽，每顿饭不少于 20 分钟。避免暴饮暴食，尽量保持七八分饱。
                2、睡眠方面
                规律作息：固定入睡和起床时间，避免熬夜和白天补觉。每天保证 7-8 小时的充足睡眠。
                营造适宜环境：保持卧室安静、黑暗和凉爽，选择舒适的床垫和枕头，有利于提高睡眠质量。睡前放松：睡前 30 分钟不做剧烈运动、不吃东西、不大量饮水，1
                小时内不做兴奋的脑力劳动或看刺激的影视节目。可通过热水洗脚、轻按头部、适度散步、欣赏音乐等放松。
                3、运动方面
                选择合适运动：可根据自身情况选登山、慢跑、游泳等有氧运动，也可选择瑜伽、太极等室内运动。没时间外出的人，也可在家做如唱歌、下蹲、踩黄豆、揉手指、按摩小腹等简单运动。坚持适量运动：每周至少进行 150
                分钟的中等强度有氧运动，或 75
                分钟的高强度有氧运动，也可将两者结合。运动要循序渐进，避免过度劳累。4、心理方面学会减压放松：通过深呼吸冥想、听音乐、阅读、做兴趣爱好活动等方式，每天抽出一定时间放松身心，缓解压力。保持积极心态：以乐观的态度面对生活和工作中的挑战，避免焦虑、抑郁等不良情绪。可多与家人、朋友交流沟通，分享感受。
            </view>
            <view class="container__tags my-30">
                <view class="tag flex fs-20">
                    <view class="tag__item px-10 py-5 rounded-10">#心理科普</view>
                    <view class="tag__item px-10 py-5 rounded-10 ml-20">#知识分享</view>
                </view>
            </view>
            <view class="container__footer">
                <uv-divider text="心理学观点，分享让生活更美好"></uv-divider>
                <view class="share-list flex justify-around px-120 pb-30">
                    <uv-icon name="weixin-circle-fill" size="40"></uv-icon>
                    <uv-icon name="qq-circle-fill" size="40"></uv-icon>
                    <uv-icon name="moments-circel-fill" size="40"></uv-icon>
                    <uv-icon name="twitter-circle-fill" size="40"></uv-icon>
                </view>
                <view class="container__footer-tips fs-20 c-cccccc pb-30">
                    ©本平台用户发布的所有原创文章、图片、视频及其他形式内容（以下简称“用户内容”），其著作权及其他知识产权均归原创作者或合法权利
                </view>
            </view>
        </view>

        <view class="container__comment mt-20 bgc-ffffff p-20">
            <CComment ref="ccRef" v-model:myInfo="myInfo" v-model:userInfo="userInfo" v-model:tableData="tableData"
                v-model:tableTotal="tableTotal" :deleteMode="deleteMode" @likeFun="likeFun" @replyFun="replyFun"
                @deleteFun="deleteFun"></CComment>
            <view class="content__card-btn" @tap="openComment">发表新评论</view>
        </view>
    </view>
</template>
<script lang="ts" setup>
    import { ref } from "vue";
    import CComment from "@/components/cc-comment/cc-comment.vue";
    // 唤起新评论弹框
    let ccRef = ref(null);
    function openComment() {
        ccRef.value.newCommentFun();
    }

    // 点赞回调事件
    function likeFun({ params }, callback) {
        console.log("likeFun", params);
        // 当请求失败, 调用callback重置点赞效果;
        // Demo如下:
        // axios.post("http://xxx/like", { id: params }).then((res) => {
        //   if (res.code !== 0) {
        //     callback(res);
        //   }
        // });
    }

    // 评论回调事件
    function replyFun({ params }, callback) {
        console.log("replyFun", params);
        // 当请求成功, 调用callback执行评论插入;
        // Demo如下:
        // axios.post("http://xxx/reply", { ...params }).then((res) => {
        //   if (res.code === 0) {
        //     callback(res);
        //   }
        // });
        const res = { id: Math.random() }; // 很重要的回参! 必须拿到后端返回评论id! 删除需要!
        setTimeout(() => callback(res), 500); // 目前为了展示效果, 直接执行callback
    }

    /** 删除回调事件
     * mode 删除模式
     * -- bind: 当被删除的一级评论存在回复评论, 那么该用户评论内容变更显示为[当前用户评论内容已被移除]
     * -- only: 仅删除当前评论(后端删除相关联的回复评论, 否则总数显示不对)
     * -- all : 删除所有评论包括回复评论
     */
    const deleteMode = ref("all");
    function deleteFun({ params, mode }, callback) {
        console.log("deleteFun", { params, mode });
        // 当请求成功, 调用callback执行评论删除;
        // Demo如下:
        // axios.post("http://xxx/delete", { ids: params, mode }).then((res) => {
        //   if (res.code === 0) {
        //     callback(res);
        //   }
        // });
        switch (mode) {
            case "bind":
                // 逻辑: 调用接口进行用户评论内容修改 update
                setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
                break;
            case "only":
                // 逻辑: 调用接口删除一个评论 delete
                setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
                break;
            default:
                // all
                // 逻辑: 调用接口删除多个评论 [delete]
                setTimeout(() => callback(), 500); // 目前为了展示效果, 直接执行callback
                break;
        }
    }

    // ----模拟数据------模拟数据------模拟数据----
    // 当前登录用户信息(提示: 一般来自localstorage, 如果是实时获取的话, 那么获取到数据后再v-if显示评论组件)
    let myInfo = ref({
        user_id: 1, // 用户id
        user_name: "cc", // 用户名
        user_avatar: "https://img0.baidu.com/it/u=2836960144,3650263035&fm=253&fmt=auto&app=138&f=JPEG?w=474&h=474", // 用户头像地址
    });
    // 文章作者信息(提示: 一般来自localstorage, 如果是实时获取的话, 那么获取到数据后再v-if显示评论组件)
    let userInfo = ref({
        user_id: 2, // 用户id
        user_name: "ikun", // 用户名
        user_avatar: "https://pic1.zhimg.com/80/v2-a79071a705f55c5d88f6c74e6111fe84_720w.webp", // 用户头像地址
    });
    let tableTotal = ref(4); // 评论总数
    let tableData = ref([
        {
            id: 120, // 评论id
            parent_id: null, // 评论父级的id
            reply_id: null, // 被回复评论的id
            reply_name: null, // 被回复人名称
            user_id: 2, // 用户id
            user_name: "ikun", // 用户名
            user_avatar: "https://pic1.zhimg.com/80/v2-a79071a705f55c5d88f6c74e6111fe84_720w.webp", // 用户头像地址
            user_content: "唱,跳,rap,篮球", // 用户评论内容
            is_like: false, // 用户是否点赞
            like_count: 120, // 点赞数统计
            create_time: "2025-02-19 09:16", // 创建时间
        },
        {
            id: 130,
            parent_id: 120, // 评论父级的id
            reply_id: 120, // 被回复评论的id
            reply_name: "ikun", // 被回复人名称
            user_id: 3, // 用户id
            user_name: "小黑子", // 用户名
            user_avatar: "https://pic2.zhimg.com/80/v2-06eade66ec837713d765b1557bf20b25_720w.webp", // 用户头像地址
            user_content: "姬霓太美~祝自己生日快乐~~", // 用户评论内容
            is_like: false, // 用户是否点赞
            like_count: 67, // 点赞数统计
            create_time: "2025-03-07 00:06", // 创建时间
        },
        {
            id: 140,
            parent_id: 120, // 评论父级的id
            reply_id: 130, // 被回复评论的id
            reply_name: "小黑子", // 被回复人名称
            user_id: 4, // 用户id
            user_name: "守护宗主维护宗门", // 用户名
            user_avatar: "https://pic3.zhimg.com/80/v2-244696a62fa750b8570cf56bfaa5b26a_720w.webp", // 用户头像地址
            user_content: "你露出鸡脚了", // 用户评论内容
            is_like: false, // 用户是否点赞
            like_count: 16, // 点赞数统计
            create_time: "2025-05-10 17:08", // 创建时间
        },
        {
            id: 150,
            parent_id: null, // 评论父级的id
            reply_id: null, // 被回复评论的id
            reply_name: null, // 被回复人名称
            user_id: 5, // 用户id
            user_name: "音乐制作人", // 用户名
            user_avatar: "https://pic2.zhimg.com/80/v2-88ec6f8c6d3305122664dd18a28730e5_720w.webp", // 用户头像地址
            user_content:
                "只因你太美baby 只因你太美baby 只因你实在是太美baby 只因你太美baby 迎面走来的你让我如此蠢蠢欲动 这种感觉我从未有 Cause I got a crush on you who you 你是我的 我是你的 谁 再多一眼看一眼就会爆炸 再近一点靠近点快被融化", // 用户评论内容
            is_like: true, // 用户是否点赞
            like_count: 8, // 点赞数统计
            create_time: "2025-12-21 00:45", // 创建时间
        },
    ]); // 评论表
</script>
<style lang="scss" scoped>
    .container {
        background-color: #f6f7fb;
    }

    .author-card {



        &__cover {

            overflow: hidden;
        }

        &__name {}

        &__desc {}

        &__title {
            background-color: #f1f3ff;


        }

        &__follow {}

    }

    .tag {

        &__item {
            background-color: #eae5fe;
            color: #a69bda;
        }
    }
</style>